<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>TPM点检</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <style type="text/css">
        .detail {
            padding-right: 20px!important;
        }

        h5 {
            color: #0062CC;
        }

        .mui-navigate-right .mui-col-xs-8 {
            width: 62.666667%!important;
        }
        .margin_b_10{
          margin-bottom: 5px
        }
    </style>
</head>

<body>
    <div class="mui-content">
        <ul class="mui-table-view mui-table-view-chevron type_list_spair">
            <li class="mui-table-view-cell detail" onclick="openSaveWin('work_order_sel_area','选择区域')">
                <div class="mui-table mui-navigate-right">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">区域：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="fixArea">请选择</span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('beginTime')">
      				<div class="mui-table mui-navigate-right">
      					<div class="mui-table-cell mui-col-xs-4">
      						<h5 class="mui-ellipsis">开始时间：</h5>
      					</div>
      					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
      						<span class="mui-h5" id="schedstart">请选择</span>
      					</div>
      				</div>
      			</li>
      			<li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('endTime')">
      				<div class="mui-table mui-navigate-right">
      					<div class="mui-table-cell mui-col-xs-4">
      						<h5 class="mui-ellipsis">结束时间：</h5>
      					</div>
      					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
      						<span class="mui-h5" id="schedfinish">请选择</span>
      					</div>
      				</div>
      			</li>
        </ul>
        <!-- 图表容器 DOM -->
        <div id="container" style="height:300px;"></div>

        <ul class="mui-table-view" id="ordrListsContent">
            <script type="text/template" id="itemslist">
                {{each datas as item i}}
                <li class="mui-table-view-cell margin_b_10" onclick="openOrderWin('{{item.worktype}}', '{{item.wonum}}')">
                  <a class="zdmb" href="#">工单：{{item.wonum}}
                    <span class="mui-badge mui-badge-inverted">负责人:{{item.userName}}</span>
                    <div style="font-size: .6rem;">描述：{{item.wonumDesc}}</div>
                  </a>
                </li>
                {{/each}}
            </script>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script src="../script/mui.picker.min.js"></script>
<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var areaArr = []
    var seriesArr = [{
        name: '计划点检',
        data: []
    }, {
        name: '实际完成',
        data: [],
        color: '#89CC40'
    }, {
        name: '异常',
        data: [],
        color: '#F3EE15'
    }]
    apiready = function() {
      $api.html($api.byId('schedstart'), formatDate(new Date(new Date().toLocaleDateString()).getTime(),'YY-MM-DD hh:mm:ss'));
      $api.html($api.byId('schedfinish'), formatDate(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1,'YY-MM-DD hh:mm:ss'))
        onLoadData()
        api.addEventListener({
            name: 'fixArea'
        }, function(ret, err) {
            $api.html($api.byId('fixArea'), ret.value.fixAreaValue)
            onLoadData()
        })
    }

    function getCheckPointChart() {
        //1.设置图表窗口自适应手机宽度
        $api.css($api.byId("container"), 'width:100%');
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: areaArr,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0,
                    dataLabels: {
                    // inside: true,
                    enabled: true,
                    // allowOverlap: true // 允许数据标签重叠
                   }
                },
                series: {
                  minPointLength : 2,
                  cursor: 'pointer',
                  events: {
                      click: function (e) {
                          var series = this.chart.series
                          if (this.index == 2 && !series[0].visible && !series[1].visible) {
                            openTastWin('work_order_manage','异常工单',{
                    					  home: '',
                    					  type: 'TPM',
                    					  orderType: 'T04',
                                cRegion: e.point.category,
                                checkIsException: 1,
                                isFromTpmPage: true
                  					})
                          }
                      },
                      legendItemClick: function(e) {
                        var series = this.chart.series
                        if (this.index == 2) {
                          series.forEach((serie, k) => {
                            if (serie.hide()) {
                              serie.show()
                            }
                          })
                        } else if (this.index == 0) {
                          if (series[0].hide()) {
                            series[0].show()
                          }
                        } else if (this.index == 1) {
                          if (series[1].hide()) {
                            series[1].show()
                          }
                        }
                      }
                  }
              }
            },
            series: seriesArr
        });
    }

    function chooseTime(type) {
        selectCommonYMDhm(function(data) {
            if (type == 'beginTime') {
                $api.html($api.byId('schedstart'), data);
            } else {
                $api.html($api.byId('schedfinish'), data);
            }
            onLoadData()
        })
    }

    function onLoadData() {
        var cRegion = getText('fixArea') == '请选择' || getText('fixArea') == '所有' ? '' : getText('fixArea')
        var schedstart = getText('schedstart') == '请选择' ? '' : getText('schedstart')
        var schedfinish = getText('schedfinish') == '请选择' ? '' : getText('schedfinish')
        ajaxrd("queryCheckPointCnt", {
            cRegion: cRegion,
            startDate: schedstart,
            endDate: schedfinish
        }, function(data) {
          areaArr = []
          seriesArr[0].data = []
          seriesArr[1].data = []
          seriesArr[2].data = []
            if (!data.length) {
                api.toast({
                    msg: "数据为空",
                    duration: 1000,
                    location: 'middle'
                });
            }
            for (var i=0; i<data.length; i++) {
              areaArr.push(data[i].cRegion + '')
              seriesArr[0].data.push(data[i].planCnt)
              seriesArr[1].data.push(data[i].finishCnt)
              seriesArr[2].data.push(data[i].exceptionCnt)
            }
            getCheckPointChart();
        })

        ajaxrd("queryTPMOrderList", {
            token: getToken.token,
            pageNumber: 1,
            pageSize: 5,
            cRegion: cRegion,
            startDate: schedstart,
            endDate: schedfinish
        }, function(ret, err) {
            AddData('itemslist', 'ordrListsContent', ret.list)
        })
    }
    function openOrderWin(name, wonum) {
        openWin('work_order_manage', name + '/工单管理', {
            background: '#6098de',
            color: '#fff'
        }, {
            type: 'orderList',
            orderType: name,
            wonum: wonum
        })
    }
</script>

</html>
